<template>
  <div id="app">
    <canvas v-if="isPc" style="position: absolute; z-index: -1" id="#canvas" width="100"
      height="100 ">dasdasdasdasdasd</canvas>
    <router-view></router-view>
    <!-- <PcIndex v-if="isPc"></PcIndex>
    <MoveIndex v-if="isMo"></MoveIndex> -->
  </div>
</template>

<script>
  // import PcIndex from "./views/PcIndex";
  // import MoveIndex from "./move/MoveIndex";
  import myCanvas from "../public/js/script.js";

  export default {
    data() {
      return {
        isPc: false,
        // isMo:false
      };
    },
    // components: {
    //   PcIndex,
    //   MoveIndex
    // },

    created() {
      if (/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)) {
        console.log("///");
        // this.isMo=true
        this.$router.push({ name: "MoveIndex" });
      } else {
        // console.log("-----");
        this.isPc = true;
        this.$nextTick(() => {
          myCanvas();
          this.$router.push({ name: "FrontPage" });
        });
      }
    },
  };
</script>

<style>
  #app {
    padding-top: 2px;
  }

  /* .sss {
    width: 100%;
    height: 100%;
    background-image: url("./assets/images/movebackimg.jpg");
    background-size: 100% 100%;
  } */

  canvas {
    display: block;
    background: linear-gradient(#000, #1c1c50);
  }

  .el-popup-parent--hidden>.el-message-box__wrapper>.el-message-box {
    width: 80%;
  }
  /* .el-button--text{
    font-size: 12px;
  } */
</style>